<!--培训任务学习-->
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import IndexSmallTitle from "../components/common/IndexSmallTitle.vue";
import {Search,Plus} from '@element-plus/icons-vue'
import {useRoute,useRouter} from "vue-router";
import TimeUtils from "../utils/TimeUtils.ts";
import service from "../utils/request.ts";

const route = useRoute();
const router = useRouter();

const tableData = [
  {
    id: '1',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: false,
    updateDate:'1719300121000',///更新时间
    releaseDate:'2024-01-01 12:12',
    url: 'https://www.hks-power.com.cn/uploadfiles/2020/09/20200909200802308.pdf',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
    versionCount:'1'///版本数量
  },
  {
    id: '2',
    scene: '应急场景',
    name: '车辆塞门处置相关要求培训课件',
    state: true,
    releaseDate:'2024-01-01 12:12',
    updateDate:'1719300121000',///更新时间
    url: 'https://www.hks-power.com.cn/uploadfiles/2020/09/20200909200802308.pdf',
    duration:'01:20:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
    versionCount:'1'///版本数量
  },
  {
    id: '3',
    scene: '应急场景',
    state: true,
    releaseDate:'2024-01-01 12:12',
    updateDate:'1719300121000',///更新时间
    name: '车辆塞门处置相关要求培训课件',
    url: 'https://www.hks-power.com.cn/uploadfiles/2020/09/20200909200802308.pdf',
    duration:'20:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
    versionCount:'1'///版本数量
  },
  {
    id: '999',
    scene: '应急场景1',
    state: true,
    name: '车辆塞门处置相关要求培训课件',
    url: 'http://vjs.zencdn.net/v/oceans.mp4',
    updateDate:'1719300121000',///更新时间
    releaseDate:'2024-01-01 12:12',
    duration:'10:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
    versionCount:'1'///版本数量
  },
  {
    id: '999',
    scene: '应急场景',
    state: true,
    releaseDate:'2024-01-01 12:12',
    updateDate:'1719300121000',///更新时间
    name: '车辆塞门处置相关要求培训课件',
    url: 'http://vjs.zencdn.net/v/oceans.mp4',
    duration:'01:10:20',
    iconUrl:'https://inews.gtimg.com/news_bt/OWvBqEB-jc6Q1r2UhKaeRr-uG6t39aEkVUds-OC0VNv4oAA/641',
    versionCount:'10'///版本数量
  },
]

/****/
function clickHandler(name:String){
  switch (name){
    case '查看':
      alert('查看');
      break;
    case '重命名':
      alert('重命名');
      break;
    case '发布新版':
      alert('发布新版');
      break;
    case '删除':
      dialogVisible.value = !dialogVisible.value;
      break;
  }
}

const dialogVisible = ref(false)

const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      positionMenuIndex: index,
    },
  });
};
function readUrlParameter() {
  const positionMenuIndex = Array.isArray(route.query.positionMenuIndex)
      ? route.query.positionMenuIndex[0]
      : route.query.positionMenuIndex;
  console.log(positionMenuIndex, 'positionMenuIndex');
  // 解析为整数
  const index = parseInt(positionMenuIndex, 10);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickHeadButtonGroup(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', positionMenuIndex);
  }
}

///搜索的关键字
const searchKey = ref('')

///是否展示分页
const hideOnSinglePage = ref(false);
///一共展示多少条数据
const pageTotalCount = ref(500);


function xuanzhong(labelName: string){
  listHeadButtnGroup.forEach((e) => {
    e.selected = false;
    if (e.label === labelName) {
      e.selected = true;
    }
  },);
}
/// 单击按钮的事件响应
function clickHeadButtonGroup(selectedIndex: number,upRoute:boolean) {
  listHeadButtnGroup.forEach((e,index) => {
    e.selected = false;
    if (index === selectedIndex) {
      e.selected = true;
    }
  },);
  if(upRoute){
    updateRoute(selectedIndex);
  }

  console.log(`valuevaluevalue${value.value}`)
}

onMounted(()=>{
  readUrlParameter();
})

const value = ref('全部类型')

const currentShowPage = ref(1);

///确认删除
function clickDeleteHandler(){
  dialogVisible.value = false;
  alert('我已经被删除了')
}


const stations = ref(null);
const fetchStations = async () => {
  try {
    const response = await service.get('/app/ts/stations');
    stations.value = response.data;
  } catch (err) {
    error.value = err;
    console.error('Failed to fetch stations:', err);
  }
};

///监听变化
watch(currentShowPage, (newValue) => {
  console.log('变化');
  console.log(newValue);
})

</script>

<template>
  <div style="display: flex;flex-direction: row;">
    <div style="width: 413px;margin-top: 20px;margin-bottom: 20px;margin-left: 15px">
      <RouterView/></div>
    <div class="mainStyle">
      <!--主体部分-->
      <div class="bodyStyle">
        <index-small-title title="规章列表"></index-small-title>
        <div class="bodyInputStyle">
          <div style="display: flex;flex-direction: row;align-items: center;gap: 5px">
            <el-input
                v-model="searchKey"
                style="width: 270px"
                size="large"
                placeholder="请输入关键词"
                :suffix-icon="Search"
            />
          </div>
          <div style="margin-left: 30px"></div>

        </div>

        <div style="display: flex;justify-content: start;margin-top: 20px">
          <el-button type="primary" :icon="Plus">添加规章</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%;margin-top: 20px" class="custom-table">
          <el-table-column prop="id" label="序号" width="60" align="center"/>
          <el-table-column prop="scene" label="名称" width="200" align="center">
          </el-table-column>
          <el-table-column prop="releaseDate" label="最新发布日期" align="center" width="150"/>
          <el-table-column prop="name" label="更新时间" align="center" width="150">
            <template v-slot="scope">
              {{TimeUtils.formatTimestamp(1719300121000,'YYYY-MM-DD HH:mm')}}
            </template>
          </el-table-column>
          <el-table-column prop="versionCount" label="版本数量" align="center" width="80"/>
          <el-table-column prop="state" label="状态" align="center" width="100">
            <template v-slot="scope">
              <div style="display: flex;justify-content: center;align-items: center">
                <div class="enable_style" :class="{enable_style_disabled:scope.row.state}"></div>
                <div style="width: 7px"></div>
                <div>{{scope.row.state?"停用":"启用"}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="300" align="center">
            <template v-slot="scope">
              <div class="control_font_style" style="display: flex;flex-direction: row;justify-content: space-between">
                <span @click="clickHandler('查看')">查看</span>
                <span @click="clickHandler('重命名')">重命名</span>
                <span @click="clickHandler('发布行版')">发布行版</span>
                <span @click="clickHandler('删除')">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="example-pagination-block">
          <el-pagination
              :hide-on-single-page="hideOnSinglePage"
              :page-count="pageTotalCount / 10"
              :default-page-size="10"
              v-model:currentPage="currentShowPage"
              layout="prev, pager, next"
          />
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="确认对话框" width="300" draggable>
    <span>您确定要删除该项吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickDeleteHandler">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.example-pagination-block {
  display: flex;
  justify-content: end;
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;

}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}

.custom-table {
  border-radius: 6px;
}

.el-table {
  --el-table-header-bg-color: #EEF8FE;
  --el-table-header-text-color: #000000;
}

.status-text {
  color: #3C8DF9;
  cursor: pointer;
}

.bodyInputStyle {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  text-align: center;
}

.bodyStyle {
}

/*操作*/
.control_font_style{
  color: #0771FF;
  font-size: 14px;
  cursor: pointer;
}

.headButtonStyle {
  background-color: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #3C8DF9;
  padding: 10px 20px;
  cursor: pointer; /*鼠标移动上去是手型*/
}

.headButtonStyle:hover {
  background-color: #A3C9FB;
}

.headButtonSelectedStyle {
  background-color: #3C8DF9;
  color: #FFFFFF;
}


.mainStyle {
  margin: 20px 15px;
  background: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(4, 42, 94, 0.1);
  padding: 20px;
  width: 100%;
}

.headGroupButtonContainerStyle {
  background: #E0F1FF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(4, 42, 94, 0.1);
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  gap: 20px;
}

/**启用的Style**/
.enable_style{
  width: 8px;
  height: 8px;
  background: #0BB26C;
  border-radius: 100px;
}

.enable_style_disabled{
  background: rgba(0,0,0,0.6);
}

</style>